import React,{Component} from 'react';
import {Table,Button,Modal,Form,Icon,Input} from 'antd'

class AntFormDemo extends Component{
    constructor(props){
        super(props);
        this.state={
            id:''
        }
    }
    //钩子函数
    componentDidMount(){
        const {form,updateDate,count}
        form.setFieldsValue({
            'name':updateDate.name,
            'age':updateDate.age,
            'address':updateDate.address,
        })
        this.setState({
            id:count
        })
    }
    //点击取消按钮
    handleCancel=()=>{
        const {handleesc} = this.props
        handleesc()//使用父组件 的方法
    }
    //点击保存按钮
    handleok=(e)=>{
        const {form,handleok} = this.props
        const {id} = this.state
        e.preventDefault();
        let newDate=form.getFieldsValue()
        handleok(newDate,id)
    }
    render(){
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched,id } = this.props.form;
        const {visible,handleSubmit}=this.props
        const usernameError = isFieldTouched('name') && getFieldError('name');
        const passwordError = isFieldTouched('age') && getFieldError('age');
        const addressError = isFieldTouched('address') && getFieldError('address');
        return(
            <div>
                <Modal
                title={id!=''?'修改':  '增加'}
                visible={visible}
                onCancel={this.handleCancel}
                maskClosable={false}
                destroyOnClose={true}
                closable={false}
                footer={[
                    <Button type="primary" key="1" onClick={this.handleok} >保存</Button>,
                    <Button type="primary" key="2" onClick={this.handleCancel}> 取消</Button>
                ]}
                >
                <Form layout="inline" onSubmit={handleSubmit}>
                <Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
                  {getFieldDecorator('name', {
                    rules: [{ required: true, message: 'Please input your name!' }],
                  })(
                    <Input
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="请输入姓名"
                    />,
                  )}
                </Form.Item>
                <br />
                <Form.Item validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
                  {getFieldDecorator('age', {
                    rules: [{ required: false, message: '请填写年龄!' }],
                  })(
                    <Input
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="请输入年龄"
                    />,
                  )}
                </Form.Item>
                <br />
                <Form.Item validateStatus={addressError ? 'error' : ''} help={addressError || ''}>
                  {getFieldDecorator('address', {
                    rules: [{ required: false, message: '请填写家庭住址!' }],
                  })(
                    <Input
                      prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                      placeholder="请输入家庭住址"
                    />,
                  )}
                </Form.Item>
              </Form>
            </Modal>
            </div>
        )
    }
}
const Myform = Form.create({ name: 'horizontal_login' })(AntFormDemo);

export default Myform